import cn from 'classnames';
import PropTypes from 'prop-types';
import React from 'react';
// import AllTable from '../AllTable';
import NewTable from './NewTable';
import PageTable, { searchStringBuilder } from '@kuiper-components/page-table';
import CopyBoard from '../../../../../components/CopyBoard';
import see from '../see.js';

import { datetime } from '../../../../../../common/formatter';
import StatusLink from '../../../../../components/StatusLink';
import { Link } from 'react-router-dom';

import Settings from '../../../../../components/TaskSettingsViewer/Aviliable';
import Nonsupport from '../../../../../components/Nonsupport';

import s from '../style.module.css';
import Tooltip from '@knownsec/react-component/dist/Tooltip'
import Button from '@knownsec/react-component/dist/Button'

import Toolbox from './Toolbox';
import { TASK_KEY_LABEL_MAP } from '../../../../../../common/constants';

const TRIGGER_TYPE = { schedule: '周期性', manual: '自定义' };
const STATUS_MAP = {
	warning: '告警',
	safe: '恢复',
	abnormalResolved: '异常恢复',
};
const routePrefix = '/alert/list/aviliable';
const resD = JSON.parse(sessionStorage.resD || null)?.feature;

class Table extends React.PureComponent {
	static propTypes = {
		className: PropTypes.string,
		category: PropTypes.string,
		match: PropTypes.shape({
			params: PropTypes.shape({
				category: PropTypes.string,
			}),
		}),
		location: PropTypes.shape({
			search: PropTypes.string,
		}),
		history: PropTypes.shape({
			replace: PropTypes.func,
		}),
		getDropdownRef: PropTypes.func,
	};

	static defaultProps = {
		className: '',
	};

	state = {
		taskType: '',
	};

	defaultFilter = {
		taskCategory: this.props.match.params.category,
	};

	columnsBuilder = () => {
		return [
			{
				title: '资产名称',
				key: 'taskName',
				dataIndex: 'taskName',
				render(taskName) {
					return (
						<div className={s.target} title={taskName}>
							{taskName}
						</div>
					);
				},
			},
			{
				title: '风险地址',
				key: 'target',
				dataIndex: 'target',
				render(val) {
					return (
						<div className={s.target} title={val}>
							<CopyBoard className={s.affect} text={val} />
						</div>
					);
				},
			},
			{
				title: '监测类型',
				key: 'taskType',
				dataIndex: 'taskType',
				render(val) {
					return <div>{TASK_KEY_LABEL_MAP[val]}</div>;
				},
			},
			{
				title: '监测方式',
				key: 'taskTriggerType',
				dataIndex: 'taskTriggerType',
				render(val) {
					return <div>{TRIGGER_TYPE[val]}</div>;
				},
			},
			{
				title: '告警内容',
				key: 'detail',
				dataIndex: 'detail',
				render(detail, record) {
					const { securityStatus, title } = record;

					return (
						<StatusLink
							className={s.aviliableDetail}
							securityStatus={securityStatus}
						>
							<div
								className={cn(s.content, s.dfs, s.w100p)}
								title={`【${STATUS_MAP[securityStatus]}】${title}`}
							>
								<span className={s[securityStatus]}>
									【{STATUS_MAP[securityStatus]}】
								</span>
								<div className={cn(s.text, s.wth, s.ell)}>{title}</div>
							</div>
						</StatusLink>
					);
				},
			},
			{
				title: '告警通知时间',
				key: 'createTime',
				dataIndex: 'createTime',
				render(val, record) {
					return (
						<div className={s.createTime}>{datetime(record.createTime)}</div>
					);
				},
			},
			{
				title: '操作',
				key: 'action',
				dataIndex: 'action',
				render(val, record) {
					const { taskCategory, taskType, task, detail, target, taskTriggerType } = record;
					const detail_ = { ...detail, ...detail.data, target, triggerType: taskTriggerType };
					return (
						task ? <>
							<Link className={s.mr16} to={see(detail_)}>
								详情
							</Link>
							<Settings
								host={record.target}
								triggerType={record?.taskTriggerType}
								taskSettings={record?.task?.taskSettings}
								taskType={record?.taskType}
								name={record?.taskName}
							>
								<span className={s.settingText}>配置</span>
							</Settings>
						</> : <Tooltip
							getPopupContainer={node => node.parentElement.parentElement.parentElement}
							placement="topLeft" overlay='任务已被删除或任务数据已过期'>
								<span className='not-allowed-style'>
									<span className='mr16'>详情</span>
									<span>配置</span>
								</span>
						</Tooltip>
					);
				},
			},
		];
	};

	componentDidMount = () => {
		let taskType;
		if (resD.httpTask && !resD.pingTask) {
			taskType = 'http';
		} else if (!resD.httpTask && resD.pingTask) {
			taskType = 'ping';
		}
		this.setState({ taskType: taskType });
		// this.reSearch({
		// 	taskType,
		// 	createTimeGTE: undefined,
		// 	createTimeLTE: undefined,
		// });
	};

	searchStringBuilder = searchStringBuilder.bind(
		this,
		this.props.location.search
	);

	reSearch = args => {
		const filter = JSON.parse(
			new URLSearchParams(this.props.location.search).get('filter') || '{}'
		);

		const search = this.searchStringBuilder({
			filter: JSON.stringify({
				...filter,
				...args,
			}),
			page: 1,
			limit: 10,
		});
		this.setState({ taskType: args.taskType }, () => {
			this.props.history.replace(`${routePrefix}?${search}`);
		});
	};

	getRefetch = x => (this.refetch = x);

	render() {
		const { className, getDropdownRef } = this.props;
		const { taskType } = this.state;
		const checkFeat = taskType => {
			if (taskType) {
				return resD[`${taskType.toLowerCase()}Task`];
			} else {
				return resD.httpTask || resD.pingTask;
			}
		};
		return (
			<div className={cn(className, s.table)}>
				<div className={s.filterContainer}>
					<Toolbox reSearch={this.reSearch} getDropdownRef={getDropdownRef} />
				</div>
				{checkFeat(taskType) ? (
					<NewTable
						columns={this.columnsBuilder()}
						routePrefix={routePrefix}
						category={'aviliable'}
						className={s.pageTable}
						history={this.props.history}
						taskType={this.state.taskType}
					/>
				) : (
					<div className={s.noBox}>
						<Nonsupport className={s.fff}></Nonsupport>
					</div>
				)}
			</div>
		);
	}
}
export default Table;
